<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视角改变</title>
    <style>
      *{
          margin:0;
          padding: 0;
      }
      :root{
          height: 100%;;
      }
      body{
          height: 100%;
          perspective: 800px;
      }
      div{
          width:200px;
          height: 200px;
          background-image: url('./img/me.jpeg');
          background-size: cover;
          position: absolute;
          top:200px;
          transform: perspective(800px) rotateY(45deg);
      }
      .content1{
          left:200px;
      }
      .content2{
          left:400px;
      } 
       .content3{
          left:600px;
      } 
       .content4{
          left:800px;
      } 
       .content5{
          left:1000px;
      }
    </style>
</head>
<body>
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
    <div class="content4"></div>
    <div class="content5"></div>
    <script>
     document.body.onmousemove = function(e){
            this.style.perspectiveOrigin = e.pageX + "px "+ e.pageY + "px";
     };
    </script>
</body>
</html>